<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2025-09-21 21:43:03
 * @Description: 减灾中心任务列表页面
-->
<template>
    <div class="task-container" :style="{ minHeight: view.height + 'px' }">
      <!-- 页面头部 -->
      <div class="page-header">
        <div class="header-content">
          <h1 class="page-title">减灾中心外协任务承接平台</h1>
          <p class="page-subtitle">浏览和申请外协任务</p>
        </div>
      </div>

      <!-- 筛选条件区域 -->
      <div class="filter-container">
        <div class="filter-content">
          <div class="filter-row">
            <!-- 搜索框 -->
            <div class="filter-item search-item">
              <el-input
                v-model="searchQuery"
                placeholder="搜索任务名称或发起人"
                clearable
                @clear="handleSearch"
                @input="handleSearch"
                class="search-input"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>

            <!-- 任务状态筛选 -->
            <div class="filter-item">
              <el-select
                v-model="filters.taskStatus"
                placeholder="任务状态"
                clearable
                @change="handleFilterChange"
                class="filter-select"
              >
                <el-option label="全部状态" value="" />
                <el-option label="未承接" value="未承接" />
                <el-option label="已承接" value="已承接" />
                <el-option label="任务结束" value="任务结束" />
              </el-select>
            </div>

            <!-- 任务级别筛选 -->
            <div class="filter-item">
              <el-select
                v-model="filters.taskLevel"
                placeholder="任务级别"
                clearable
                @change="handleFilterChange"
                class="filter-select"
              >
                <el-option label="全部级别" value="" />
                <el-option label="部门任务" value="部门任务" />
                <el-option label="项目任务" value="项目任务" />
              </el-select>
            </div>

            <!-- 职位要求筛选 -->
            <div class="filter-item">
              <el-select
                v-model="filters.positionRequirement"
                placeholder="职位要求"
                clearable
                @change="handleFilterChange"
                class="filter-select"
              >
                <el-option label="全部职位" value="" />
                <el-option label="科研助理" value="科研助理" />
                <el-option label="技术开发" value="技术开发" />
                <el-option label="业务秘书" value="业务秘书" />
              </el-select>
            </div>

            <!-- 操作按钮 -->
            <div class="filter-actions">
              <el-button type="primary" @click="handleSearch">
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
              <el-button @click="handleReset">
                <el-icon><Refresh /></el-icon>
                重置
              </el-button>
            </div>
          </div>

          <!-- 统计信息 -->
          <div class="filter-stats">
            <span class="stats-text">
              共找到 <strong>{{ filteredTaskList.length }}</strong> 个任务
              <span v-if="hasActiveFilters" class="filter-hint">（已筛选）</span>
            </span>
            <div class="quick-filters">
              <el-tag
                v-for="(count, status) in taskStatusStats"
                :key="status"
                :type="getStatusTagType(status)"
                size="small"
                class="stats-tag"
                @click="quickFilterByStatus(status)"
                :class="{ 'active': filters.taskStatus === status }"
              >
                {{ status }} ({{ count }})
              </el-tag>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 任务列表 -->
      <div class="task-list-container">
        <!-- 排序选项 -->
        <div class="sort-container">
          <span class="sort-label">排序：</span>
          <el-radio-group v-model="sortBy" @change="handleSort" size="small">
            <el-radio-button label="default">默认</el-radio-button>
            <el-radio-button label="deadline">截止日期</el-radio-button>
            <el-radio-button label="createTime">发布时间</el-radio-button>
            <el-radio-button label="personnelCount">需要人数</el-radio-button>
          </el-radio-group>
        </div>

        <div class="task-list" v-if="paginatedTaskList.length > 0">
          <el-card
            v-for="task in paginatedTaskList"
            :key="task.id"
            class="task-card"
            shadow="hover"
          >
            <!-- 任务头部标签 -->
            <div class="task-header">
              <div class="task-tags">
                <el-tag 
                  :type="getStatusTagType(task.taskStatus)"
                  size="small"
                  class="status-tag"
                >
                  {{ task.taskStatus }}
                </el-tag>
                <el-tag 
                  :type="getLevelTagType(task.taskLevel)"
                  size="small"
                  class="level-tag"
                >
                  {{ task.taskLevel }}
                </el-tag>
                <el-tag 
                  type="info"
                  size="small"
                  class="position-tag"
                >
                  {{ task.positionRequirement }}
                </el-tag>
              </div>
              <span class="task-id">#{{ task.id }}</span>
            </div>
  
            <!-- 任务标题 -->
            <h2 class="task-title" @click="viewTaskDetail(task)">
              {{ task.taskName }}
            </h2>
  
            <!-- 任务内容 -->
            <p class="task-content">
              {{ task.taskContent }}
            </p>
  
            <!-- 任务信息 -->
            <div class="task-info">
              <div class="info-item">
                <el-icon><User /></el-icon>
                <span>发起人：{{ task.initiator }}</span>
              </div>
              <div class="info-item">
                <el-icon><UserFilled /></el-icon>
                <span>需要人数：{{ task.personnelCount }}人</span>
              </div>
              <div class="info-item">
                <el-icon><Clock /></el-icon>
                <span>工期：{{ task.workHours.startDate }} 至 {{ task.workHours.endDate }}</span>
              </div>
            </div>
  
            <!-- 申请和承接信息 -->
            <div class="applicant-info" v-if="task.applicants.length > 0 || task.assignee">
              <div v-if="task.applicants.length > 0" class="applicants">
                <span class="label">申请人：</span>
                <el-tag 
                  v-for="applicant in task.applicants" 
                  :key="applicant"
                  size="small"
                  type="info"
                  class="applicant-tag"
                >
                  {{ applicant }}
                </el-tag>
              </div>
              <div v-if="task.assignee" class="assignee">
                <span class="label">承接人：</span>
                <el-tag size="small" type="success" class="assignee-tag">
                  {{ task.assignee }}
                </el-tag>
              </div>
              <div v-if="task.applicants.length === 0 && !task.assignee" class="no-applicant">
                <el-tag size="small" type="warning">暂无申请人</el-tag>
              </div>
            </div>
  
            <!-- 任务底部 -->
            <div class="task-footer">
              <div class="footer-info">
                <span class="deadline">
                  <el-icon><Calendar /></el-icon>
                  截止日期：{{ task.deadline }}
                </span>
                <span v-if="task.attachments" class="attachments">
                  <el-icon><Paperclip /></el-icon>
                  {{ task.attachments.length }}个附件
                </span>
              </div>
              
              <div class="task-actions">
                <el-button 
                  v-if="task.taskStatus === '未承接'"
                  type="primary"
                  size="small"
                  @click="applyTask(task)"
                >
                  申请任务
                </el-button>
                <el-button 
                  size="small"
                  @click="viewTaskDetail(task)"
                >
                  查看详情
                </el-button>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 空状态 -->
        <div v-else class="empty-state">
          <el-empty description="没有找到符合条件的任务">
            <el-button type="primary" @click="handleReset">重置筛选条件</el-button>
          </el-empty>
        </div>
  
        <!-- 分页 -->
        <div class="pagination-container" v-if="filteredTaskList.length > 0">
          <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :total="filteredTaskList.length"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="handlePageChange"
            @size-change="handleSizeChange"
          />
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { defineComponent, reactive, ref, toRefs, onMounted, watch, computed } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { 
    User, 
    UserFilled, 
    Clock, 
    Calendar, 
    Paperclip,
    Search,
    Refresh
  } from '@element-plus/icons-vue';
  
  onMounted(() => {
    // 页面加载完成后的初始化操作
  });
  
  var view = reactive({
    height: window.innerHeight,
  });
  
  window.onresize = () => {
    view.height = window.innerHeight;
  };
  
  // 当前页码和每页显示数量
  const currentPage = ref(1);
  const pageSize = ref(10);
  
  // 搜索和筛选条件
  const searchQuery = ref('');
  const filters = reactive({
    taskStatus: '',
    taskLevel: '',
    positionRequirement: ''
  });

  // 排序方式
  const sortBy = ref('default');
  
  // 原始任务列表数据
  const originalTaskList = ref([
    {
      id: 1,
      initiator: "张主任",
      taskLevel: "部门任务",
      taskName: "水库安全监测数据分析",
      positionRequirement: "科研助理",
      taskContent: "负责分析山东省小型水库监测数据，包括水位、流量等关键指标的统计分析，并编制相关技术报告",
      personnelCount: 2,
      applicants: ["李明", "王小红", "赵强"],
      assignee: "李明",
      workHours: {
        startDate: "2025-09-20",
        endDate: "2025-10-15"
      },
      deadline: "2025-10-15",
      taskStatus: "已承接",
      attachments: ["监测数据.xlsx", "技术要求.pdf"],
      createTime: "2025-09-15"
    },
    {
      id: 2,
      initiator: "陈工程师",
      taskLevel: "项目任务",
      taskName: "防洪调度系统优化",
      positionRequirement: "技术开发",
      taskContent: "优化现有防洪调度系统的算法模块，提升计算效率和预警准确性，包括前端界面改进和后端逻辑优化",
      personnelCount: 1,
      applicants: ["张技术", "刘开发"],
      assignee: null,
      workHours: {
        startDate: "2025-10-01",
        endDate: "2025-11-30"
      },
      deadline: "2025-11-30",
      taskStatus: "未承接",
      attachments: ["系统架构图.png", "需求文档.docx", "测试数据.sql"],
      createTime: "2025-09-12"
    },
    {
      id: 3,
      initiator: "李部长",
      taskLevel: "部门任务",
      taskName: "年度工作总结材料整理",
      positionRequirement: "业务秘书",
      taskContent: "整理2025年度减灾中心各部门工作总结材料，编制综合报告，协调各部门数据收集和格式统一",
      personnelCount: 1,
      applicants: ["王秘书"],
      assignee: "王秘书",
      workHours: {
        startDate: "2025-09-15",
        endDate: "2025-09-30"
      },
      deadline: "2025-09-30",
      taskStatus: "任务结束",
      attachments: ["模板.docx"],
      createTime: "2025-09-10"
    },
    {
      id: 4,
      initiator: "赵研究员",
      taskLevel: "项目任务",
      taskName: "气象预警模型验证",
      positionRequirement: "科研助理",
      taskContent: "对新开发的气象预警模型进行历史数据验证，分析模型准确率，优化参数配置，编写验证报告",
      personnelCount: 1,
      applicants: ["孙研究", "钱助理"],
      assignee: "孙研究",
      workHours: {
        startDate: "2025-09-25",
        endDate: "2025-10-20"
      },
      deadline: "2025-10-20",
      taskStatus: "已承接",
      attachments: ["历史数据.csv", "模型文档.pdf"],
      createTime: "2025-09-18"
    },
    {
      id: 5,
      initiator: "周主管",
      taskLevel: "部门任务",
      taskName: "设备采购清单制作",
      positionRequirement: "业务秘书",
      taskContent: "制作2026年度设备采购清单，包括预算编制、供应商调研、技术参数确认等工作",
      personnelCount: 1,
      applicants: [],
      assignee: null,
      workHours: {
        startDate: "2025-10-10",
        endDate: "2025-10-25"
      },
      deadline: "2025-10-25",
      taskStatus: "未承接",
      attachments: null,
      createTime: "2025-09-16"
    },
    {
      id: 6,
      initiator: "吴教授",
      taskLevel: "项目任务",
      taskName: "洪水风险评估报告",
      positionRequirement: "科研助理",
      taskContent: "基于最新的洪水模型和历史数据，编制华北地区洪水风险评估报告，包括风险等级划分和防御建议",
      personnelCount: 2,
      applicants: ["马研究", "朱助理", "徐工程师"],
      assignee: null,
      workHours: {
        startDate: "2025-10-05",
        endDate: "2025-12-15"
      },
      deadline: "2025-12-15",
      taskStatus: "未承接",
      attachments: ["数据清单.xlsx", "技术规范.pdf"],
      createTime: "2025-09-14"
    },
    {
      id: 7,
      initiator: "胡经理",
      taskLevel: "部门任务",
      taskName: "会议筹备和组织",
      positionRequirement: "业务秘书",
      taskContent: "筹备2025年减灾技术交流会，包括场地预订、专家邀请、材料准备、会务安排等全流程服务",
      personnelCount: 1,
      applicants: ["高秘书", "任助理"],
      assignee: "高秘书",
      workHours: {
        startDate: "2025-09-18",
        endDate: "2025-11-10"
      },
      deadline: "2025-11-10",
      taskStatus: "已承接",
      attachments: ["会议议程.docx", "专家名单.xlsx"],
      createTime: "2025-09-11"
    },
    {
      id: 8,
      initiator: "郭工程师",
      taskLevel: "项目任务",
      taskName: "监测平台数据迁移",
      positionRequirement: "技术开发",
      taskContent: "将旧版监测平台的历史数据迁移到新系统，确保数据完整性和准确性，编写迁移脚本和测试方案",
      personnelCount: 1,
      applicants: ["程开发"],
      assignee: "程开发",
      workHours: {
        startDate: "2025-09-10",
        endDate: "2025-09-25"
      },
      deadline: "2025-09-25",
      taskStatus: "任务结束",
      attachments: ["数据库结构.sql", "迁移方案.docx"],
      createTime: "2025-09-08"
    }
  ]);

  // 计算属性：筛选后的任务列表
  const filteredTaskList = computed(() => {
    let result = [...originalTaskList.value];

    // 按搜索关键词筛选
    if (searchQuery.value.trim()) {
      const query = searchQuery.value.toLowerCase().trim();
      result = result.filter(task => 
        task.taskName.toLowerCase().includes(query) ||
        task.initiator.toLowerCase().includes(query) ||
        task.taskContent.toLowerCase().includes(query)
      );
    }

    // 按状态筛选
    if (filters.taskStatus) {
      result = result.filter(task => task.taskStatus === filters.taskStatus);
    }

    // 按级别筛选
    if (filters.taskLevel) {
      result = result.filter(task => task.taskLevel === filters.taskLevel);
    }

    // 按职位要求筛选
    if (filters.positionRequirement) {
      result = result.filter(task => task.positionRequirement === filters.positionRequirement);
    }

    // 排序
    if (sortBy.value !== 'default') {
      result.sort((a, b) => {
        switch (sortBy.value) {
          case 'deadline':
            return new Date(a.deadline).getTime() - new Date(b.deadline).getTime();
          case 'createTime':
            return new Date(b.createTime).getTime() - new Date(a.createTime).getTime();
          case 'personnelCount':
            return b.personnelCount - a.personnelCount;
          default:
            return 0;
        }
      });
    }

    return result;
  });

  // 计算属性：分页后的任务列表
  const paginatedTaskList = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return filteredTaskList.value.slice(start, end);
  });

  // 计算属性：是否有活动的筛选条件
  const hasActiveFilters = computed(() => {
    return searchQuery.value.trim() !== '' ||
           filters.taskStatus !== '' ||
           filters.taskLevel !== '' ||
           filters.positionRequirement !== '';
  });

  // 计算属性：任务状态统计
  const taskStatusStats = computed(() => {
    const stats = {};
    originalTaskList.value.forEach(task => {
      stats[task.taskStatus] = (stats[task.taskStatus] || 0) + 1;
    });
    return stats;
  });
  
  // 获取状态标签类型
  const getStatusTagType = (status: string) => {
    switch (status) {
      case '未承接':
        return 'warning';
      case '已承接':
        return 'primary';
      case '任务结束':
        return 'success';
      default:
        return 'info';
    }
  };
  
  // 获取级别标签类型
  const getLevelTagType = (level: string) => {
    return level === '项目任务' ? 'danger' : 'info';
  };

  // 处理搜索
  const handleSearch = () => {
    currentPage.value = 1; // 重置到第一页
  };

  // 处理筛选条件变化
  const handleFilterChange = () => {
    currentPage.value = 1; // 重置到第一页
  };

  // 处理重置
  const handleReset = () => {
    searchQuery.value = '';
    filters.taskStatus = '';
    filters.taskLevel = '';
    filters.positionRequirement = '';
    sortBy.value = 'default';
    currentPage.value = 1;
    ElMessage.success('筛选条件已重置');
  };

  // 处理排序
  const handleSort = () => {
    currentPage.value = 1; // 重置到第一页
  };

  // 快速按状态筛选
  const quickFilterByStatus = (status: string) => {
    if (filters.taskStatus === status) {
      filters.taskStatus = ''; // 如果点击的是当前选中状态，则取消筛选
    } else {
      filters.taskStatus = status;
    }
    handleFilterChange();
  };
  
  // 申请任务
  const applyTask = (task: any) => {
    ElMessageBox.confirm(
      `确定要申请任务"${task.taskName}"吗？`,
      '申请确认',
      {
        confirmButtonText: '确定申请',
        cancelButtonText: '取消',
        type: 'info',
      }
    ).then(() => {
      ElMessage.success('任务申请提交成功！');
    }).catch(() => {
      ElMessage.info('已取消申请');
    });
  };
  
  // 查看任务详情
  const viewTaskDetail = (task: any) => {
    ElMessage.info('跳转到任务详情页面');
    // 这里可以添加路由跳转逻辑
  };
  
  // 分页处理
  const handlePageChange = (page: number) => {
    currentPage.value = page;
  };

  // 每页显示数量变化处理
  const handleSizeChange = (size: number) => {
    pageSize.value = size;
    currentPage.value = 1;
  };
  </script>
  
  <style lang="scss" scoped>
  .task-container {
    background-color: var(--el-bg-color-page);
    padding: 0;
  }
  
  .page-header {
    background-color: var(--el-bg-color);
    border-bottom: 1px solid var(--el-border-color);
    padding: 24px 0;
    
    .header-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      
      .page-title {
        font-size: 24px;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin: 0 0 8px 0;
      }
      
      .page-subtitle {
        font-size: 14px;
        color: var(--el-text-color-regular);
        margin: 0;
      }
    }
  }

  .filter-container {
    background-color: var(--el-bg-color);
    border-bottom: 1px solid var(--el-border-color-lighter);
    padding: 20px 0;
    
    .filter-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      
      .filter-row {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        align-items: center;
        margin-bottom: 16px;
        
        .filter-item {
          flex-shrink: 0;
          
          &.search-item {
            flex: 1;
            min-width: 200px;
            max-width: 300px;
          }
        }
        
        .search-input {
          width: 100%;
        }
        
        .filter-select {
          width: 140px;
        }
        
        .filter-actions {
          display: flex;
          gap: 8px;
          margin-left: auto;
        }
      }
      
      .filter-stats {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        
        .stats-text {
          font-size: 14px;
          color: var(--el-text-color-regular);
          
          strong {
            color: var(--el-text-color-primary);
          }
          
          .filter-hint {
            color: var(--el-color-primary);
            font-size: 12px;
          }
        }
        
        .quick-filters {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;
          
          .stats-tag {
            cursor: pointer;
            transition: all 0.2s;
            
            &:hover {
              transform: translateY(-1px);
            }
            
            &.active {
              border-color: var(--el-color-primary);
              background-color: var(--el-color-primary-light-9);
            }
          }
        }
      }
    }
  }
  
  .task-list-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px;
  }

  .sort-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    
    .sort-label {
      font-size: 14px;
      color: var(--el-text-color-regular);
    }
  }
  
  .task-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .empty-state {
    text-align: center;
    padding: 60px 0;
  }
  
  .task-card {
    border: 1px solid var(--el-border-color);
    transition: all 0.3s ease;
    
    &:hover {
      border-color: var(--el-color-primary);
      transform: translateY(-2px);
    }
    
    :deep(.el-card__body) {
      padding: 20px;
    }
  }
  
  .task-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    
    .task-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      
      .status-tag, .level-tag, .position-tag {
        font-size: 12px;
      }
    }
    
    .task-id {
      font-size: 12px;
      color: var(--el-text-color-placeholder);
      font-weight: 500;
    }
  }
  
  .task-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    margin: 0 0 12px 0;
    cursor: pointer;
    line-height: 1.4;
    
    &:hover {
      color: var(--el-color-primary);
    }
  }
  
  .task-content {
    font-size: 14px;
    color: var(--el-text-color-regular);
    line-height: 1.6;
    margin: 0 0 16px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .task-info {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
    
    .info-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: var(--el-text-color-regular);
      
      .el-icon {
        font-size: 14px;
      }
    }
  }
  
  .applicant-info {
    margin-bottom: 16px;
    
    .applicants, .assignee, .no-applicant {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .label {
        font-size: 12px;
        color: var(--el-text-color-regular);
        min-width: fit-content;
      }
      
      .applicant-tag, .assignee-tag {
        font-size: 12px;
      }
    }
  }
  
  .task-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--el-border-color-lighter);
    
    .footer-info {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      
      .deadline, .attachments {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: var(--el-text-color-regular);
        
        .el-icon {
          font-size: 14px;
        }
      }
    }
    
    .task-actions {
      display: flex;
      gap: 8px;
    }
  }
  
  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }
  
  // 响应式设计
  @media (max-width: 1024px) {
    .filter-content {
      .filter-row {
        .filter-item.search-item {
          flex: 1 1 100%;
          max-width: none;
        }
        
        .filter-actions {
          margin-left: 0;
          width: 100%;
          justify-content: center;
        }
      }
      
      .filter-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        
        .quick-filters {
          width: 100%;
          justify-content: center;
        }
      }
    }
  }

  @media (max-width: 768px) {
    .page-header .header-content,
    .filter-content,
    .task-list-container {
      padding: 0 16px;
    }
    
    .filter-container {
      padding: 16px 0;
    }
    
    .task-list-container {
      padding: 20px 16px;
    }

    .filter-content {
      .filter-row {
        flex-direction: column;
        align-items: stretch;
        
        .filter-item {
          width: 100%;
          
          .filter-select {
            width: 100%;
          }
        }
        
        .filter-actions {
          flex-direction: row;
          gap: 12px;
          
          .el-button {
            flex: 1;
          }
        }
      }
    }

    .sort-container {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
    
    .task-card :deep(.el-card__body) {
      padding: 16px;
    }
    
    .task-header {
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
    }
    
    .task-info {
      flex-direction: column;
      gap: 8px;
    }
    
    .task-footer {
      flex-direction: column;
      gap: 12px;
      align-items: stretch;
      
      .footer-info {
        flex-direction: column;
        gap: 8px;
      }
      
      .task-actions {
        justify-content: flex-end;
      }
    }
    
    .applicant-info {
      .applicants, .assignee {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        
        .label {
          margin-bottom: 4px;
        }
      }
    }
  }
  </style>
  
  <style lang="scss">
  // 全局样式，配合主题
  .task-container {
    .el-tag {
      border-radius: 4px;
    }
    
    .el-button {
      border-radius: 4px;
    }
    
    .el-card {
      border-radius: 8px;
    }

    .el-input {
      border-radius: 6px;
    }

    .el-select {
      border-radius: 6px;
    }
  }
  </style>